<template>
  <div class="app-container1">
    <el-card shadow="never" class="table-container table-container1">
      <el-button type="primary" @click="handleAdd()">
        <i-ep-plus />
        新增对比项
      </el-button>
      <el-button @click="reset()">
        <i-ep-refresh />
        重置
      </el-button>
    </el-card>
    <div class="container1">
      <div class="content">
        <el-card
          class="table-container w-[100%]"
          style="height: calc(100vh - 120px - 60px)"
          v-if="contrastList.length === 0"
        >
          <el-empty description="暂无数据，请添加对比项" />
        </el-card>
        <div
          v-for="(item, index) in contrastList"
          :key="item.key"
          class="content_box"
        >
          <el-icon class="close_icon" @click="handleRemoveCard(item.key)"
            ><RemoveFilled
          /></el-icon>
          <PcmMonitoring
            :isContrast="1"
            :key="item.key"
            :keyId="item.key.toString()"
          />
        </div>
      </div>
    </div>
    <el-backtop target=".container1" :right="50" :bottom="100" />
  </div>
</template>

<script setup lang="ts">
import PcmMonitoring from "@/views/pcm/pcmMonitoring/index.vue";
import { RemoveFilled } from "@element-plus/icons-vue";

defineOptions({
  name: "PCMPCMMONITORCONTRAST",
  inheritAttrs: false,
});

const list = {
  key: 0,
};
const contrastList = ref(<any>[]);

onMounted(() => {});

function handleAdd() {
  contrastList.value = [
    ...contrastList.value,
    {
      ...list,
      key: new Date().getTime(),
    },
  ];
}
function reset() {
  contrastList.value = [];
}
function handleRemoveCard(index: number) {
  ElMessageBox.confirm("是否删除当前对比项?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      const current = contrastList.value.findIndex(
        (item: any) => item.key === index
      );
      contrastList.value.splice(current, 1);
    })
    .catch(() => {});
}
</script>
<style lang="scss" scoped>
:deep(.app-container) {
  padding: 0px !important;
  width: 560px;
  min-width: 560px; /* 设置卡片最小宽度 */
  max-width: 560px; /* 确保所有卡片具有相同的宽度 */
  .el-form--inline .el-form-item {
    margin-right: 15px;
    .el-select {
      width: 158px;
    }
  }
  .table-container .el-card__body .title strong {
    font-size: 15px;
  }
}
:deep(.app-container:nth-last-child(1)) {
  border-right: none;
}
:deep(.table-container1) {
  margin: 10px 10px 0px;
  .el-card__body {
    padding: 10px 20px;
  }
}
.container1 {
  overflow: auto; /* 启用滚动 */
  width: calc(100% - 20px);
  margin: 10px;
  height: calc(100vh - 120px - 60px);

  /* 针对WebKit浏览器的滚动条样式 */

  .content {
    display: flex;
    .content_box {
      padding: 0px 8px 0px !important;
      border-right: 1px dashed #666;
      position: relative;
      .close_icon {
        width: 21px;
        height: 21px;
        color: #f56c6c;
        position: absolute;
        right: 12px;
        top: 3px;
        font-size: 21px;
        cursor: pointer;
      }
    }
    .content_box:nth-last-child(1) {
      border-right: none;
    }
    .content_box:nth-child(1) {
      padding-left: 0 !important;
    }
  }
}
:deep(.sj) {
  font-size: 12px;
}
:deep(.sj_select) {
  width: 110px !important;
}
:deep(.single_count_input) {
  width: 90px !important;
}
:deep(.add_plus) {
  flex-direction: row !important;
  padding: 0 !important;
  padding-top: 10px !important;
}

/* 一般浏览器的不要太小，容易看不见 */
::-webkit-scrollbar {
  height: 9px;
  width: 9px;
}
::-webkit-scrollbar-thumb {
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-track {
  border-radius: 0;
  background: transparent;
}
</style>
